<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>问卷id:{{this.projectid}}</span>
            </div>
            <div class="text item">
<!--                <el-form :label-position="labelPosition" ref="ruleForm" label-width="80px"-->
<!--                         :model="formLabelAlign" >-->
                <div v-for="(item,index1) in datas" :key="index1">
                    <p>{{item.contentid}}. {{item.question}}</p>
                    <div v-for="(i) in item.answers" >
                        <el-radio v-model="result[index1].answer" :label="i" @change="pushid(item.contentid.toString(),index1)">{{i}}</el-radio>
                    </div>

                </div>
<!--                    <el-form-item>-->
                        <el-button style="margin-top: 20px" type="primary" @click.native.prevent="submits">提交</el-button>
<!--                        <el-button @click="resetForm">重置</el-button>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
            </div>
        </el-card>
    </div>
</template>

<script>
    import {GetByPid,Answer} from "../../network/user";
    import {getUserId} from "../../utils/auth";

    export default {
        name: "ProjectId",
        data(){
            return{
                labelPosition: 'right',
                projectid:this.$store.state.projectid,
                datas:[],
                radio:"",
                result:[]
            }
        },
        mounted() {
            GetByPid({"projectid":this.projectid}).then(res => {
                console.log(res);
                if(res.length !== 0){
                    this.datas = res;
                    //分割 answer
                    for (let i of this.datas){
                        i.answers = i.answers.split("|")
                    }
                    //创建反馈数组
                    for(let i in res){
                        let obj = {
                            "pid":this.projectid,
                            "answer":"",
                            "userid":getUserId(),
                            "contentid":""
                        };
                        this.result.push(obj)
                    }
                    console.log(this.result)
                }else {
                    this.$message.error("该问卷还没有题目",1000)
                }
            })
        },
        methods:{

            pushid(id,index1){
                this.result[index1].contentid = id
            },
            submits(){
                Answer(this.result).then(res => {
                    if(res === 1){
                        this.$message.success("提交成功",1000)
                    }else {
                        this.$message.error("还有题目未完成",1000)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
        width: 30vw;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
        height: 85vh;
    }
</style>
